<link rel="stylesheet" href="../../../../Public/datetimepicker/css/bootstrap-datetimepicker.css">
<extend name="Public:mainbase" />
<block name="content">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap-switch.min.css">
    <script src="__PUBLIC__/js/bootstrap-switch.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="__PUBLIC__/datetimepicker/css/bootstrap-datetimepicker.css">
    <script src="__PUBLIC__/datetimepicker/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>

    <script src="__PUBLIC__/js/Validform_v5.3.2_min.js" type="text/javascript"></script>
    <style>
        .uploadImageBox{
            position: absolute;width: 25%;top: 135px;left:59%
        }
        .Validform_wrong{
            margin-left:50px;
            line-height: 22px;
            height: auto;
        }
    </style>

    <form action="{:U('updateVersion')}" method="post">
        <div class="panel panel-default">
            <div class="panel-body">
                <form name="form2" method="post">
                    <table width="98%" class="table table-bordered  table-hover table-condensed "  align="center">
                        <tr bgcolor="#E7E7E7" >
                            <td height="28" colspan="11" background="__PUBLIC__/images/tbg.gif" style="padding-left:10px;">
                                ◆ 版本列表 &nbsp;&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target=".newlaunchbox"><i class="glyphicon glyphicon-plus"></i> 添加版本</button>
                            </td>
                        </tr>
                        <tr align="center" bgcolor="#FBFCE2" height="25">
                            <td width="6%">ID</td>
                            <td width="10%">名称</td>
                            <td width="10%">启动图</td>
                            <td width="10%">启动图类型</td>
                            <td width="10%">有效时间</td>
                            <td width="10%">权重</td>
                            <td width="10%">展示效果</td>
                            <td width="10%">状态</td>
                            <td width="10%">操作</td>
                        </tr>
                        <foreach name="vList" item="val">
                            <tr align='center' bgcolor="<?php if((int)$val['expire_date']<time()){echo '#ffffdd';}else{echo '#FFFFFF';}?>" height="26">
                                <td nowrap  style="vertical-align: middle;">{$val.id}</td>
                                <td nowrap  style="vertical-align: middle;">{$val.name}
                                    <?php
                                        if($val['expire_date']<time()){
                                            echo "<strong>[已失效]</strong>";
                                        }
                                    ?>
                                </td>
                                <td style="vertical-align: middle;"><img src="{$val.image_url}?imageView2/0/w/100/format/jpg/q/85" height="100" /></td>
                                <td  style="vertical-align: middle;">
                                    <switch name="val.type">
                                        <case value="0">欢迎页(无链接)</case>
                                        <case value="1">内部链接</case>
                                        <case value="2">外部链接</case>
                                    </switch>
                                </td>
                                <td style="vertical-align: middle;">{$val['expire_date']|date="Y-m-d",###}</td>
                                <td style="vertical-align: middle;">{$val.weight}</td>
                                <td style="vertical-align: middle;">
                                    <?php
                                    if($val['is_show_skip']==1){
                                        echo "可跳过，展示".$val['skip_time']."秒";
                                    }else{
                                        echo "不能跳过，展示".$val['skip_time']."秒";
                                    }
                                      ?>
                                </td>
                                <td style="vertical-align: middle;">
                                    <?php
                                    if($val['is_use']==0){
                                        echo "未使用";
                                    }else if($val['is_use']==1 && $val['expire_date']>time()){
                                        echo "正在使用";
                                    }else{
                                        echo "已过期";
                                    }
                                      ?>
                                    </td>
                                <td style="vertical-align: middle;">
                                    <a href="javascript:;" data-id='{$val.id}' class='editlaunch'>修改</a>
                                    |
                                    <a href="javascript:;" data-id='{$val.id}' class='dellaunch'>删除</a>
                                </td>
                            </tr>
                        </foreach>
                        <tr bgcolor="#ffffff">
                            <td height="36" colspan="11">
                                &nbsp;
                                <a href="javascript:selAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-ok'></i> 全选</a>
                                <a href="javascript:noSelAll()" class="btn btn-xs btn-info"><i class='glyphicon glyphicon-remove'></i> 取消</a>
                                <!-- <a href="javascript:checkArc(0)" class="btn btn-xs btn-info">&nbsp;审核&nbsp;</a> -->
                                <a href="javascript:;" id="delversionall" class="btn btn-xs btn-info"><i class="glyphicon glyphicon-trash"></i> 删除</a>
                            </td>
                        </tr>
                </form>
                <tr align="right" bgcolor="#F9FCEF">
                    <td height="36" colspan="11" align="center">
                        <span>{$showpage}</span>
                    </td>
                </tr>
                </table>



            </div>

        </div>
    </form>
    <!-- 添加组弹窗 -->
    <div class="modal fade newlaunchbox" tabindex="-1" Auth="dialog" aria-labelledby="add_user_jump" id='newlaunchbox'>
        <div class="modal-dialog modal-sm" style="width:45%">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加组信息</h4>
                </div>

                <form action="{:U('add')}" method="POST" class="form-horizontal" id="detailForm" style="padding:15px 0">
                    <div class="Validform_checktip"></div>
                    <input name='id' type="hidden" value='0'>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">广告名称 <span style="color:red;font-weight:bold">(*)</span></label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="name"  datatype="*" nullmsg="请填写广告名称">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">缩略图<span style="color:red;font-weight:bold">(*)</span></label>
                        <div class="col-xs-3">
                            <div id="uploader-demo"></div>

                        </div>

                        <div class="uploadImageBox">
                            <div id="fileList" class="uploader-list"></div>
                            <input type="hidden" name="image_url" id="image_url">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">有效期<span style="color:red;font-weight:bold">(*)</span></label>
                        <div class="col-xs-4">
                             <input type="text" class="form-control form_datetime" name="expire_date" datatype="*" nullmsg="请选择有效期">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">开机图类型</label>
                        <div class="col-xs-4">
                            <select class="form-control" id="adType" name="type">
                                <option value="0">欢迎页(无链接)</option>
                                <option value="1">APP内跳转</option>
                                <option value="2">外链</option>
                            </select>

                        </div>
                    </div>

                    <div class="form-group hidden" id="linksbox">
                        <label class="col-xs-3 control-label">链接</label>
                        <div class="col-xs-4">
                            <textarea class="form-control" name="links" cols="30" rows="4" datatype="*" nullmsg="请填写链接"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">权重</label>
                        <div class="col-xs-2">
                            <input type="text" class="form-control" name="weight" value="1">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">是否显示“跳过”</label>
                        <div class="col-xs-6">
                            <input id="is_show_skip_1" name="is_show_skip" type="radio" value="1" checked="checked">
                            <label for="is_show_skip_1">开启</label>&nbsp;&nbsp;
                            <input id="is_show_skip_0" name="is_show_skip" type="radio" value="0">
                            <label for="is_show_skip_0">不开启</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-xs-3 control-label">展示时长</label>
                        <div class="col-xs-2">
                            <div class="input-group">
                                <input type="text" class="form-control" name="skip_time" value="5"><div class="input-group-addon">秒</div>
                            </div>
                        </div>
                    </div>



                    <div class="form-group">
                        <label class="col-xs-3 control-label">状态</label>
                        <div class="col-xs-6">
                            <input id="is_use_1" name="is_use" type="radio" value="1" checked="checked">
                            <label for="is_use_1">开启</label>&nbsp;&nbsp;
                            <input id="is_use_0" name="is_use" type="radio" value="0">
                            <label for="is_use_0">不开启</label>
                        </div>
                    </div>

                    <div class="add-error-message error item"></div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-success" id="submitBTN">确定添加</button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button type="button" class="btn btn-danger"  data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--image upload-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/webUploader/webuploader.css">
    <script type="text/javascript" src="__PUBLIC__/webUploader/webuploader.min.js"></script>

    <script type="text/javascript">
    var uploader;
    function escape2Html(str) {
        var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'};
        return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){return arrEntities[t];});
    }
    var form=$("form").Validform({
        tiptype:function(msg,o,cssctl){
            if(o.type==3){
                $(".Validform_checktip").addClass("Validform_wrong").html(msg);
            }else{
                $(".Validform_checktip").removeClass("Validform_wrong").html("");
            }

        },
        ignoreHidden:true,
        beforeSubmit:function(curform){
            var state=uploader.getFiles();

            if($("#image_url").val()!=""){
                $(".Validform_checktip").removeClass("Validform_loading").removeClass("Validform_wrong").html("");
            }else if(state.length>=1 && $("#image_url").val()==""){
                $(".Validform_checktip").removeClass("Validform_wrong").addClass('Validform_loading').html("正在上传图片...");
                uploader.upload();
                return false;
            }else if(state.length==0 && $("#image_url").val()==""){
                $(".Validform_checktip").removeClass("Validform_loading").addClass("Validform_wrong").html('请选择开机图');
                return false;
            }
        }

    });

    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        minView:"month",
        autoclose: true,
        todayBtn: true,
        pickerPosition: "bottom-left",
        language:'zh-CN'
    });

    $("#adType").change(function(){
        if($(this).val()==0){
            $("#linksbox").addClass("hidden");
        }else{
            if($(this).val()==1){
                $("#linksbox label").html("内链地址");
            }else{
                $("#linksbox label").html("外链地址");
            }
            $("#linksbox").removeClass("hidden");
        }
    })

    $('.editlaunch').click(function(){
            $('#newlaunchbox form').get(0).reset();
            $('#newlaunchbox form').attr('action', '{:U("edit")}');
            $("#submitBTN").html("确定修改");
            $.get("{:U('ajaxGetLaunchInfo')}?id="+$(this).data('id'),function(data){
                if(data!=0){
                    $("#newlaunchbox [name=id]").val(data.id);
                    $("#newlaunchbox [name=name]").val(data.name);
                    $("#newlaunchbox [name=image_url]").val(data.image_url);
                    $("#newlaunchbox [name=weight]").val(data.weight);
                    if(data.image_url) {
                        $('#fileList').html('<div id="WU_FILE_0" class="file-item thumbnail"><img src="'+data.image_url+'"/></div>')
                    }
                    $("#newlaunchbox [name=type]").val(data.type);

                $("#newlaunchbox [name=links]").val(escape2Html(data.links));
                    if(data.type==0){
                        $("#linksbox").addClass("hidden");
                    }else{
                        if(data.type==1){
                            $("#linksbox label").html("内链地址");
                        }else{
                            $("#linksbox label").html("外链地址");
                        }
                        $("#linksbox").removeClass("hidden");
                    }
                    $("#newlaunchbox [name=skip_time]").val(data.skip_time);
                    $("#newlaunchbox [name=expire_date]").val(data.expire_date);
                    $("#is_use_" + data.is_use).click();
                    $("#is_show_skip_" + data.is_show_skip).click();
                }
            })
            $('#newlaunchbox .Validform_checktip').empty().attr('class','Validform_checktip');
            $('.Validform_error').removeClass('Validform_error');
            $('#newlaunchbox').modal('show');
        })

        $('.dellaunch').click(function(){
            if(confirm('是否确定删除此开机图？')){
                var obj=this;
                $.get('{:U("ajaxdellaunch")}?id='+$(obj).data('id'),function(data){
                    if(data==1){
                        $(obj).parents('tr').remove();
                    }
                })
            }
        })

        $('#newlaunchbox').on('shown.bs.modal', function (e) {
            $("#uploader-demo").html('<div id="filePicker">选择图片</div>');
            uploader = WebUploader.create({
                auto: false,
                swf: 'http://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',
                server: 'http://upload.qiniu.com/',
                pick: '#filePicker',
                fileNumLimit:1,
                compress:false,
                fileSingleSizeLimit:"4072000",
                formData:{
                    token:"{$uploadToken}"
                },
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            uploader.on('error', function(type){
                console.log(type);

                switch(type){
                    case "F_EXCEED_SIZE":
                        alert("请选择3M以下的图片");
                    break;
                    case "Q_TYPE_DENIED":
                        alert("请选择图片文件");
                    break;
                }
            })

            uploader.on('beforeFileQueued',function(){
                $("#fileList").empty();
                uploader.reset();
                $("#image_url").val("");
            })

            uploader.on( 'fileQueued', function( file ) {

                var $li = $(
                                '<div id="' + file.id + '" class="file-item thumbnail">' +
                                '<img>' +
                                '</div>'
                        ),
                        $img = $li.find('img');
                $("#fileList").html( $li );
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr( 'src', src );
                }, 1, 1 );
                $(".Validform_checktip").removeClass("Validform_loading").removeClass("Validform_wrong").html("");
            });

            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress span');
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo( $li )
                            .find('span');
                }

                $percent.css( 'width', percentage * 100 + '%' );
            });


            uploader.on( 'uploadSuccess', function( file ,response ) {
                $( '#'+file.id ).addClass('upload-state-done');
                $("#image_url").val("{:C('IMAGE_HOST')}"+response.key);
                $(".Validform_checktip").removeClass("Validform_wrong").html("");
                $("#submitBTN").click();
            });

            uploader.on( 'uploadError', function( file ) {
                var $li = $( '#'+file.id ),
                        $error = $li.find('div.error');

                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传失败');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });
        })

        $('#newlaunchbox').on('hidden.bs.modal', function (e) {
            uploader.reset();
            uploader.destroy();
            $("#fileList").empty();
        })

    </script>
</block>